<template>
  <div class="box">
    <!-- 筛选导航栏! -->
    <el-form :inline="true" style="text-align: left">
      <el-form-item label="商品名称">
        <el-input
          v-model="query.commodityName"
          placeholder="请输入商品名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户姓名">
        <el-input v-model="query.name" placeholder="请输入用户姓名"></el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <!-- <el-input v-model="query."></el-input> -->
        <el-select v-model="query.orderStatus" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="query.phone" placeholder="请输入电话号码"></el-input>
      </el-form-item>
      <el-form-item label="地区">
        <el-input v-model="query.region" placeholder="请输入地区"></el-input>
      </el-form-item>
      <el-button type="primary" @click="searchData">搜索</el-button>
      <el-button type="danger" @click="emptyData">清空</el-button>
    </el-form>
    <!-- 列表展示栏! -->
    <el-table :data="dataList" border stripe style="width: 100%">
      <el-table-column
        label="序号"
        align="center"
        width="100px"
        :show-overflow-tooltip="true"
      >
        <template scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="commodityName"
        label="商品名称"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="name"
        label="用户姓名"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="orderStatus"
        label="订单状态"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus == 0">创建</span>
          <span v-if="scope.row.orderStatus == 1">完成</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="region"
        label="地区"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="address"
        label="详细地址"
        align="center"
        :show-overflow-tooltip="true"
      />

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-popconfirm
            title="确定订单状态转为完成么?"
            @onConfirm="changeStatus(scope)"
            v-if="scope.row.orderStatus == 0"
          >
            <el-button slot="reference" type="text">完成</el-button>
          </el-popconfirm>

          <!-- <el-popconfirm
            title="确定转为创建么?"
            @onConfirm="changeStatus(scope)"
            v-if="scope.row.orderStatus == 1"
          >
            <el-button slot="reference" type="text">转为创建</el-button>
          </el-popconfirm> -->

          <el-popconfirm
            title="确定删除这条数据么?"
            @onConfirm="Malldelete(scope)"
          >
            <el-button slot="reference" type="text" style="color: #fb575e"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页导航栏! -->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  consigneeInfo,
  deleteCommodity,
  updateOrderStatus,
} from "../../assets/js/api";
export default {
  data() {
    return {
      query: {
        commodityName: "",
        name: "",
        orderStatus: "",
        pageNo: 1,
        pageSize: 10,
        phone: "",
        region: "",
      },
      options: [
        {
          value: 0,
          label: "创建",
        },
        {
          value: 1,
          label: "完成",
        },
      ],
      dataList: [],
      total: null,
      currentPage: 1,
    };
  },
  created() {
    this.getPageList();
  },
  methods: {
    //获取收货人数据列表!
    getPageList() {
      consigneeInfo(this.query).then((res) => {
        this.dataList = res.data.records;
        this.total = res.data.total;
      });
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getPageList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getPageList();
    },
    // 搜索按钮!
    searchData() {
      this.query.pageNo = 1;
      this.getPageList();
    },
    // 清空按钮!
    emptyData() {
      this.query.name = "";
      this.query.commodityName = "";
      this.query.orderStatus = "";
      this.query.phone = "";
      this.query.region = "";
      this.getPageList();
    },
    // 删除按钮!
    Malldelete(data) {
      deleteCommodity(data.row.consigneeId).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.getPageList();
        } else {
          this.$message.success(res.message);
        }
      });
    },
    // 专为创建/转为完成按钮!
    changeStatus(data) {
      if (data.row.orderStatus == 1) {
        updateOrderStatus({
          consigneeId: data.row.consigneeId,
          orderStatus: 0,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message);
            this.getPageList();
          } else {
            this.$message.error(res.message);
          }
        });
      } else {
        updateOrderStatus({
          consigneeId: data.row.consigneeId,
          orderStatus: 1,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message);
            this.getPageList();
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding: 20px;
  background-color: #fff;
}
::v-deep .el-pagination__total {
  visibility: hidden;
}
::v-deep .el-pagination {
  position: absolute;
  margin-top: 20px;
  right: 0;
}
.title {
  position: absolute;
  left: 0;
  margin-top: 15px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 21px;
}
</style>
